<!--
 * @Author       : wfl
 * @LastEditors: ww
 * @description  :
 * @updateInfo   :
 * @Date         : 2022-11-24 16:36:43
 * @LastEditTime: 2023-06-30 14:01:44
-->
<script lang="ts" name="NodeConfig">
import { computed, defineComponent, ref } from 'vue'
import { EInsertNode } from '@main/views/approve-workflow/enum'

import Approve from './ApprovalNodeConfig.vue'
import Condition from './ConditionNodeConfig.vue'
import Delay from './DelayNodeConfig.vue'
import Carbon_copy from './CcNodeConfig.vue'
import Trigger from './TriggerNodeConfig.vue'
import FormAuthorityConfig from './FormAuthorityConfig.vue'
import Initiator from './RootNodeConfig.vue'
import Dispose from './DisposeNodeConfig.vue'

export default defineComponent({
  components: {
    Approve,
    Carboncopy: Carbon_copy,
    Initiator,
    Condition,
    Trigger,
    Delay,
    FormAuthorityConfig,
    Dispose
  },
  setup() {
    const active = ref('properties')

    const flowStore = useFlowStore()

    const selectNode = computed(() => flowStore.selectedNode)
    const selectType = computed(() => {
      const _type = selectNode.value.type
      return _type.substr(0, 1) + _type.substr(1).toLowerCase()
    })

    const formConfig = computed(() => flowStore.design.formItems)
    const name = computed(() => {
      switch (selectNode.value.type) {
        case EInsertNode.ROOT:
          return '设置发起人'
        case EInsertNode.APPROVAL:
          return '设置审批人'
        case EInsertNode.CC:
          return '设置抄送人'
        default:
          return null
      }
    })

    const isComponent = computed(() => {
      const node = selectNode.value.type === EInsertNode.CC ? 'CarbonCopy' : selectNode.value.type
      return node.toLowerCase()
    })

    return {
      active,
      selectType,
      selectNode,
      formConfig,
      name,
      isComponent
    }
  }
})
</script>

<template>
  <div>
    <!-- <el-tabs v-model="active" v-if="name && formConfig.length > 0"> -->
    <!-- <el-tab-pane :label="name" name="properties"> -->
    <component
      :is="isComponent"
      :config="selectNode.props"
    />
    <!-- </el-tab-pane> -->
    <!-- <el-tab-pane label="表单权限设置" name="permissions">
        <form-authority-config />
      </el-tab-pane> -->
    <!-- </el-tabs> -->
    <!-- <component :is="selectType" v-else :config="selectNode.props" /> -->
  </div>
</template>

<style lang="scss">
.ikflow-flow-config-label{
  font-weight: 600;
}
</style>
